<template>
  <view class="nav-bar">
    <view
      class="nav-bar-item"
      :class="tabIndex === index ? 'active' : ''"
      v-for="(item, index) in list"
      @click="handleNavClick(index)"
      :key="item"
    >
      {{ item }}
    </view>
  </view>
</template>

<script>
export default {
  // 基本类型：按值传递；
  // [] {}  function 引用类型-按引用传值；
  // vue2 基本语法 data为什么必须是一个函数形式？
  // 函数有一个特点，每次返回的值，都是新引用
  // .vue 实例  new Vue .vue .vue
  props: {
    list: {
      type: Array
    }
  },
  data() {
    return {
      tabIndex: 0
    }
  },
  methods: {
    handleNavClick(index) {
      this.tabIndex = index
      this.$emit('navClick', { index })
    }
  }
}
</script>

<style lang="scss">
.nav-bar {
  width: 100%;
  height: 40px;
  display: flex;
  background: lightcoral;
  .nav-bar-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .active {
    background: red;
  }
}
</style>
